<template>
  <div>
    <div class="findpwd-title">{{$t('message.findPwd')}}</div>
    <input type="password" v-model.trim="pwd" :class="{ 'input-error' : passwordErrorText }" class="input" :placeholder="$t('message.findPwdPasswordHolder')" />
    <div class="error-tips" v-if="passwordErrorText">
      <span>{{ passwordErrorText }}</span>
    </div>
    <input type="password" v-model.trim="repwd" :class="{ 'input-error' : repasswordErrorText }" class="input repwd" :placeholder="$t('message.findPwdPasswordHolder2')" />
    <div class="error-tips" v-if="repasswordErrorText">
      <span>{{ repasswordErrorText }}</span>
    </div>
    <button type="button" class="btn btn-orange" @click="finish"><span :class="{ 'btn-loading': isLoading }">{{$t('message.finish')}}</span></button>
  </div>
</template>

<script>
export default {
  name: 'FindPassordSecond',
  data () {
    return {
      sendPhoneNumber: this.$route.query.phone,
      code: this.$route.query.code,
      pwd: '',
      passwordStatus: 0,
      repwd: '',
      repasswordStatus: 0,
      isLoading: false
    }
  },
  computed: {
    passwordErrorText () {
      switch (this.passwordStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.registerError8')
        case 3:
          return this.$t('message.registerError9')
      }
    },
    repasswordErrorText () {
      switch (this.repasswordStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.registerError8')
        case 3:
          return this.$t('message.registerError9')
        case 4:
          return this.$t('message.registerError10')
      }
    }
  },
  watch: {
    pwd (val) {
      clearTimeout(this.pwdTimer)
      this.pwdTimer = setTimeout(() => {
        if (!/^.{6,16}$/.test(val)) {
          this.passwordStatus = 2
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)) {
          this.passwordStatus = 3
        } else {
          this.passwordStatus = 1
          // 如果两个输入框都填了，突然修改密码
          if (this.repwd !== '' && this.repwd !== val) {
            this.repasswordStatus = 4
          } else if (this.repwd === val) {
            this.repasswordStatus = 1
          }
        }
      }, 800)
    },
    repwd (val) {
      clearTimeout(this.rePwdTimer)
      this.rePwdTimer = setTimeout(() => {
        if (!/^.{6,16}$/.test(val)) {
          this.repasswordStatus = 2
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)) {
          this.repasswordStatus = 3
        } else if (this.pwd !== val) {
          this.repasswordStatus = 4
        } else {
          this.repasswordStatus = 1
        }
      }, 800)
    }
  },
  methods: {
    finish () {
      if (this.isLoading) {
        return
      }
      if (this.pwd === '') {
        this.passwordStatus = 2
      }
      if (this.repwd === '') {
        this.repasswordStatus = 2
      }
      if (this.passwordStatus === 1 && this.repasswordStatus === 1) {
        this.isLoading = true
        this.$ajax.checkPwd(this.sendPhoneNumber, this.repwd, this.code).then((res) => {
          this.isLoading = false
          if (res.code === 200) {
            this.$router.push({ path: 'success' })
          }
        }).catch(() => {
          this.isLoading = false
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    }
  }
}
</script>

<style scoped>
.findpwd-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
}

.input {
  width: 376px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  border-radius: 2px;
}

.repwd {
  margin-top: 24px;
}

.btn {
  width: 376px;
  height: 48px;
  font-size: 16px;
  border-radius: 2px;
  margin-top: 50px;
}
</style>